<!DOCTYPE html>
<html lang="en">
<head>
    <!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.

      The path provided below has to start and end with a slash "/" in order for
      it to work correctly.

      For more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

      This is a placeholder for base href that will be replaced by the value of
      the `--base-href` argument provided to `flutter build`.
    -->
    <base href="$FLUTTER_BASE_HREF">

    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta content="Ghosten Player" name="description">
    <meta content="never" name="referrer">

    <!-- iOS meta tags & icons -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="Ghosten Player" name="apple-mobile-web-app-title">
    <link href="favicon.png" rel="apple-touch-icon">

    <!-- Favicon -->
    <link href="favicon.png" rel="icon" type="image/png"/>

    <title>Ghosten Player</title>
    <link href="manifest.json" rel="manifest">
    <style>
        .sk-fading-circle {
            width: 48px;
            height: 48px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .sk-fading-circle .sk-circle {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0
        }

        .sk-fading-circle .sk-circle:before {
            content: "";
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #fff;
            border-radius: 100%;
            -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both
        }

        .sk-fading-circle .sk-circle2 {
            transform: rotate(30deg)
        }

        .sk-fading-circle .sk-circle3 {
            transform: rotate(60deg)
        }

        .sk-fading-circle .sk-circle4 {
            transform: rotate(90deg)
        }

        .sk-fading-circle .sk-circle5 {
            transform: rotate(120deg)
        }

        .sk-fading-circle .sk-circle6 {
            transform: rotate(150deg)
        }

        .sk-fading-circle .sk-circle7 {
            transform: rotate(180deg)
        }

        .sk-fading-circle .sk-circle8 {
            transform: rotate(210deg)
        }

        .sk-fading-circle .sk-circle9 {
            transform: rotate(240deg)
        }

        .sk-fading-circle .sk-circle10 {
            transform: rotate(270deg)
        }

        .sk-fading-circle .sk-circle11 {
            transform: rotate(300deg)
        }

        .sk-fading-circle .sk-circle12 {
            transform: rotate(330deg)
        }

        .sk-fading-circle .sk-circle2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s
        }

        .sk-fading-circle .sk-circle3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s
        }

        .sk-fading-circle .sk-circle4:before {
            -webkit-animation-delay: -.9s;
            animation-delay: -.9s
        }

        .sk-fading-circle .sk-circle5:before {
            -webkit-animation-delay: -.8s;
            animation-delay: -.8s
        }

        .sk-fading-circle .sk-circle6:before {
            -webkit-animation-delay: -.7s;
            animation-delay: -.7s
        }

        .sk-fading-circle .sk-circle7:before {
            -webkit-animation-delay: -.6s;
            animation-delay: -.6s
        }

        .sk-fading-circle .sk-circle8:before {
            -webkit-animation-delay: -.5s;
            animation-delay: -.5s
        }

        .sk-fading-circle .sk-circle9:before {
            -webkit-animation-delay: -.4s;
            animation-delay: -.4s
        }

        .sk-fading-circle .sk-circle10:before {
            -webkit-animation-delay: -.3s;
            animation-delay: -.3s
        }

        .sk-fading-circle .sk-circle11:before {
            -webkit-animation-delay: -.2s;
            animation-delay: -.2s
        }

        .sk-fading-circle .sk-circle12:before {
            -webkit-animation-delay: -.1s;
            animation-delay: -.1s
        }

        @-webkit-keyframes sk-circleFadeDelay {
            0%, 39%, to {
                opacity: 0
            }
            40% {
                opacity: 1
            }
        }

        @keyframes sk-circleFadeDelay {
            0%, 39%, to {
                opacity: 0
            }
            40% {
                opacity: 1
            }
        }
    </style>
</head>
<body>
<div class="sk-fading-circle loading">
    <div class="sk-circle1 sk-circle"></div>
    <div class="sk-circle2 sk-circle"></div>
    <div class="sk-circle3 sk-circle"></div>
    <div class="sk-circle4 sk-circle"></div>
    <div class="sk-circle5 sk-circle"></div>
    <div class="sk-circle6 sk-circle"></div>
    <div class="sk-circle7 sk-circle"></div>
    <div class="sk-circle8 sk-circle"></div>
    <div class="sk-circle9 sk-circle"></div>
    <div class="sk-circle10 sk-circle"></div>
    <div class="sk-circle11 sk-circle"></div>
    <div class="sk-circle12 sk-circle"></div>
</div>
<script>
    {{flutter_js}}
    {{flutter_build_config}}

    _flutter.loader.load({
        onEntrypointLoaded: async function (engineInitializer) {
            const appRunner = await engineInitializer.initializeEngine();
            const loading = document.querySelector('.loading');
            loading?.parentElement.removeChild(loading);
            await appRunner.runApp();
        }
    });
</script>
</body>
</html>
